import React from "react";
import { Link, withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import { MenuUnfoldOutlined } from '@ant-design/icons';
import routes from '@/routes';

const { SubMenu } = Menu;

class menu extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            openKeys: [],
            selectedKeys: []
        }
    }

    componentDidMount() {
        this.matchRoute()
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.props.location.pathname !== prevProps.location.pathname){
            this.matchRoute()
        }
    }

    render() {
        const {openKeys, selectedKeys} = this.state;
        return (
            <>
                <Menu mode="inline"
                      style={{width: 200}}
                      openKeys={openKeys}
                      selectedKeys={selectedKeys}
                      onClick={this.menuClick.bind(this)}
                      onOpenChange={this.openChange.bind(this)}
                >
                    {
                        routes.map(route => {
                            if(route.name){
                                return (
                                    <SubMenu key={route.path}
                                             title={<span>
                                                      <MenuUnfoldOutlined />
                                                      <span>{route.name}</span>
                                                    </span>}
                                    >
                                        {
                                            route.routes.map((item) => {
                                                return (
                                                    <Menu.Item key={item.path}>
                                                        <Link to={item.path}>{item.meta.title}</Link>
                                                    </Menu.Item>
                                                )
                                            })
                                        }
                                    </SubMenu>
                                )
                            }
                            return ''
                        })
                    }
                </Menu>
            </>
        );
    }

    // 切换菜单
    menuClick (e){
        this.setState({
            selectedKeys: [e.key]
        })
    }

    // 展开/收缩菜单栏
    openChange (e){
        this.setState({
            openKeys: e
        })
    }

    // 匹配路由、高亮
    matchRoute (){
        let pathname = this.props.location.pathname,
            split_pathname = pathname.split('/'),
            openname = split_pathname.slice(0,3).join('/'),
            selectname = split_pathname.slice(0,4).join('/');
        this.setState({
            openKeys: [openname],
            selectedKeys: [selectname]
        })
    }
}


export default withRouter(menu)
